<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="140px" style="height:100vh;">
                <!-- <Menu></Menu> -->
                <div style="width:140px;height:100%;background-color:white">
                    <el-row class="tac">
                        <el-col>
                            <div class="InputSearch"> <el-input class="rounded-input" size="mini"
                                    prefix-icon="el-icon-search" placeholder="商品名称" clearable>
                                </el-input></div>
                            <p class="tacText">
                                <i class="el-icon-time"></i>
                                <span>售卖中</span>
                            </p>
                            <ul class="menuList">
                                <li v-scroll-to="{
                                    el: `#tba${menuSon.name}`,
                                    container: '.product',
                                    duration: 500,
                                    lazy: true,
                                    easing: 'linear',
                                    offset: -10,
                                    force: true,
                                    cancelable: true,
                                    x: false,
                                    y: true
                                }" v-for="menuSon in menuList" :key="menuSon.name" :index="menuSon.name"
                                    :class="{ 'active': activeIndex == menuSon.name }"> {{ menuSon.title }}</li>
                            </ul>
                        </el-col>
                    </el-row>
                </div>
            </el-aside>
            <el-main>
                <div class="product">
                    <!-- goodsList -->
                    <!-- v-for="(item, index) in goodsList" :key="index"
                     -->
                    <div id="`tba${index}`" class="product_list" >
                        <p class="product_listTitle">会员卡</p>
                        <div class="product_box">
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- <div id="tba0" class="product_list">
                        <p class="product_listTitle">未分类</p>
                        <div class="product_box">
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tba1" class="product_list">
                        <p class="product_listTitle">会员卡</p>
                        <div class="product_box">
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tba2" class="product_list">
                        <p class="product_listTitle">特产</p>
                        <div class="product_box">
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tba3" class="product_list">
                        <p class="product_listTitle">饮料</p>
                        <div class="product_box">
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tba4" class="product_list">
                        <p class="product_listTitle">零食</p>
                        <div class="product_box">
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tba5" class="product_list">
                        <p class="product_listTitle">小吃</p>
                        <div class="product_box">
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tba6" class="product_list">
                        <p class="product_listTitle">电竞外设</p>
                        <div class="product_box">
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tba7" class="product_list">
                        <p class="product_listTitle">其他</p>
                        <div class="product_box">
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                            <div class="product_listItem">
                                <img src="../../../../assets/img//1.png">
                                <p class="product_listItem_text">热塑薯片</p>
                                <div class="product_listItem_price">
                                    <h3>￥7.00</h3>
                                    <div class="product_listItem_priceCount">
                                        <span class="btnCountof">－</span>
                                        <b>1</b>
                                        <span class="btnCountadd">+</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> -->
                    <div id="height" class="product_list">666</div>
                </div>
            </el-main>
            <el-aside width="284px" style="height:100vh;">
                <div class="aside_top_box">
                    <div class="aside_top">
                        <span>已选商品</span>
                        <div class="aside_top_right">
                            <span>共3件</span>
                            |
                            <span>清空</span>
                        </div>
                    </div>
                </div>
                <div class="aside_center">
                    <div class="aside_center_list">
                        <div class="aside_center_list_item">
                            <span>乐事薯片</span>
                            <div class="aside_center_list_item_right">
                                <span>￥7.00</span>
                                <div><span>1</span></div>
                                <i class="el-icon-delete" style="color:red"></i>
                            </div>
                        </div>
                        <div class="aside_center_list_item">
                            <span>乐事薯片</span>
                            <div class="aside_center_list_item_right">
                                <span>￥7.00</span>
                                <div><span>1</span></div>
                                <i class="el-icon-delete" style="color:red"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="aside_bottom">
                    <div class="aside_bottom_left">
                        合计金额：
                        <div>￥3500.00</div>
                    </div>
                    <div class="aside_bottom_right">
                        <el-button type="primary" size="small" @click="BookDialog = true">记一笔</el-button>
                        <el-button type="primary" size="small" @click="BookDialog = true">立即结算</el-button>
                    </div>
                </div>
            </el-aside>
        </el-container>
        <!-- 记一笔对话框 -->
        <el-dialog title="收货地址" :visible.sync="BookDialog" width="35%">
            <el-form :model="form" :label-width="formLabelWidth" class="formBook">
                <el-form-item label="商品金额">
                    <div class="formBook_one">
                        <el-select v-model="form.region" size="small" placeholder="原价" style="width:80px">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                        <el-input v-model="form.name" size="small" style="width:100px">
                            <span slot="prefix" style="color:#000000">￥</span>
                        </el-input>
                        <el-select v-model="form.region" size="small" placeholder="业绩归属" style="width:100px">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </div>
                </el-form-item>
                <el-form-item label="记一笔订单">
                    <div class="formBook_two">
                        <el-input v-model="form.name" size="small" placeholder="请输入房间号/姓名/手机号选择关联订单"></el-input>
                        <span>关联订单</span>
                    </div>
                </el-form-item>
                <el-form-item label="客户信息">
                    <div class="formBook_three">
                        <el-input v-model="form.name" size="small" style="width:80px" placeholder="姓名"></el-input>
                        <el-input v-model="form.name" size="small" style="width:100px" placeholder="手机号"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="配送服务">
                    <div class="formBook_three">
                        <el-radio v-model="form.radio" :label="1">店内自提</el-radio>
                        <el-radio v-model="form.radio" :label="2">店内闪送
                            <span v-if="form.radio == 2">(配送费<span style="color: red;">￥5.00</span>)</span>
                        </el-radio>
                    </div>
                </el-form-item>
                <el-form-item label="收货人信息" v-if="form.radio == 2">
                    <div class="formBook_four">
                        <el-input v-model="form.name" size="small" style="width:80px" placeholder="姓名"></el-input>
                        <el-input v-model="form.name" size="small" style="width:100px" placeholder="手机号"></el-input>
                        <div>
                            <el-input v-model="form.name" size="small" placeholder="收获地址"></el-input>
                        </div>
                    </div>

                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" :rows="3" placeholder="限300字" v-model="form.name">
                    </el-input>
                </el-form-item>
                <el-form-item label="收款记录" v-if="isCheckout">
                    <div class="formBook_five">
                        <div class="formBook_five_list_box">
                            <div class="formBook_five_list" v-for="(item, index) in form.list" :key="index">
                                <el-select v-model="item.select" size="mini" placeholder="原价" style="width:80px">
                                    <el-option label="原价" :value="1"></el-option>
                                    <el-option label="折扣价" :value="2"></el-option>
                                </el-select>
                                <el-input v-model="item.price" size="mini" style="width:100px">
                                    <span slot="prefix" style="color:#000000">￥</span>
                                </el-input>
                            </div>
                        </div>

                        <p @click="addrecode">+添加记录</p>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <div v-if="isCheckout">
                    已收款:<span style="color:#1989FA">￥0.00</span>
                    待收款:<span>￥3500.00</span>
                </div>
                <div v-else>合计金额:<span>￥3500.00</span></div>
                <el-button size="small" @click="dialogFormVisible = false">取消订单</el-button>
                <el-button size="small" type="primary" @click="dialogFormVisible = false">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import Menu from '../../components/Menu'
export default {
    name: 'TopMenuSupermarket',
    components: {
        // Menu
    },
    data() {
        return {
            menuList: [
                {
                    name: '0',//对应index
                    title: '未分类',
                },
                {
                    name: '1',//对应index
                    title: '会员卡',
                },
                {
                    name: '2',//对应index
                    title: '特产',
                },
                // 超市设置
                {
                    name: '3',//对应index
                    title: '饮料',
                },

                {
                    name: '4',//对应index
                    title: '零食',
                    // path: '/Settings/AccountManage',
                },
                {
                    name: '5',//对应index
                    title: '小吃',
                },
                {
                    name: '6',//对应index
                    title: '电竞外设',
                },
                {
                    name: '7',//对应index
                    title: '其他',
                },
            ],//tab切换标签页
            activeIndex: 0,
            isTouching: false,

            isCheckout: false,//true，立即结账，记一笔，false
            formLabelWidth: '90px',
            BookDialog: false,//记一笔对话框
            form: {
                radio: 1,
                list: [{
                    select: 1,
                    price: 200
                }],
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },

            goodsList: [],//商品列表

        }
    },
    mounted() {
        this.initEvent()
        // window.addEventListener("scroll", this.initEvent);
    },
    destroyed() {
        // 销毁监听
        // document.removeEventListener('scroll', this.initEvent);
    },
    created() {
        this.getData()
    },
    methods: {
        // 添加付款记录
        addrecode() {
            this.form.list.push({
                select: 1,
                price: 0,
            })
        },

        // 获取商品数据
        getData() {
            let data = {
                hotel_id: sessionStorage.getItem('hotel_id'),
                platform: 1,
            }
            // /supplier/market/category
            // supplier/market/goods/category?hotel_id=9483&platform=0
            // this.my_request('supplier/market/goods/category', data, 'GET').then(res => {
            //     console.log(' 获取商品数据', res)
            // })
            // 分类接口
            this.my_request('supplier/market/goods/category', {}, 'GET').then(res => {
                console.log(' 获取商品数据', res)
                let { code, data } = res.data
                if (200 == code) {
                    this.goodsList = data
                }
            })
        },


        initEvent() {
            console.log(666);
            const el = this.$el.querySelector('.product') // 父元素，其内部元素滚动
            const h = el.querySelectorAll('.product_list') // 页面中所有的内容的标题，如上面的为你推荐
            const offettopList = [] // 存储标题距离父元素顶部的位置
            for (const k of h) { // 将所有内容的标题距离其父元素顶部的距离存成一个数组
                offettopList.push(k.offsetTop - 200)
            }
            console.log(offettopList);
            el.addEventListener('scroll', () => {
                var scr = el.scrollTop
                offettopList.forEach((t, i) => {
                    if (scr >= t && scr < offettopList[i + 1]) { // 当某个元素距离父元素顶部距离小于 5 时
                        this.changeActiveIndex(i) // 切换高亮的楼层按钮
                    }
                })
            })
        },
        changeActiveIndex(index) {
            this.activeIndex = index
        },

    },
}
</script>


<style lang="scss" scoped>
.common-layout {
    font-size: 16px;
}

.formBook {
    .formBook_five {
        .formBook_five_list_box {
            max-height: 160px;
            overflow: auto;

            .formBook_five_list {}

        }


        p {
            color: #1989FA;
            font-size: 12px;
        }
    }

    .formBook_one {
        .el-input {
            margin-right: 10px;
        }
    }

    .formBook_two {
        .el-input {
            width: calc(100% - 70px);
        }

        span {
            font-size: 14px;
            color: #0486fe;
            margin-left: 10px;
        }
    }

    .formBook_three {
        .el-input {
            margin-right: 10px;
        }
    }

    .el-form-item {
        margin-bottom: 10px;
    }
}

.dialog-footer {
    div {
        float: left;
        line-height: 32px;
        font-size: 12px;

        span {
            color: #FF3A0F;
            font-size: 15px;
            font-weight: 600;
        }
    }

}

.el-main {
    overflow: hidden;
    padding: 0px;
}

.el-aside {
    background-color: white;

    .aside_top_box {
        border-bottom: #D1D1D1 1px solid;
        padding: 0px !important;

        .aside_top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: calc(100% - 40px);
            height: 25px;
            margin: 15px;

            .aside_top_right {
                font-size: 14px;

                span:nth-child(1) {
                    color: #999999;
                }

                span:nth-child(2) {
                    color: red;
                }
            }

        }
    }

    .aside_center {
        padding: 15px;
        overflow: auto;
        height: calc(100% - 280px);

        .aside_center_list {
            .aside_center_list_item {
                font-size: 14px;
                display: flex;
                justify-content: space-between;
                padding-bottom: 15px;

                .aside_center_list_item_right {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    div {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 5px;

                        width: 40px;
                        margin: 0 5px;
                        border: 1px #D1D1D1 solid;
                    }

                    i:hover {
                        cursor: pointer;
                    }
                }
            }
        }
    }

    .aside_bottom {
        margin-top: 40px;
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .aside_bottom_left {
            font-size: 12px;
            color: #999999;
            width: 35%;

            div {
                font-weight: 550;
                font-size: 14px;
                color: #FF3A0F;
            }
        }
    }
}


.product {
    padding: 15px;
    box-sizing: border-box;
    height: calc(100vh - 100px);
    width: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;

    #height {
        height: 100px;
        line-height: 100px;
        color: #ebf1f6;
    }

    .product_list {
        width: 100%;
        height: 100%;
        margin-bottom: 15px;

        .product_listTitle {
            font-size: 12px;
            color: #333333;
            margin-bottom: 5px;
        }

        .product_box {
            display: flex;
            flex-wrap: wrap;

            // justify-content: space-between;
            .product_listItem {
                width: 120px;
                height: 148px;
                border-radius: 8px;
                border: solid 1px #D0D0D0;
                box-shadow: 0 2 5 0 #D0D0D0;
                overflow: hidden;
                background-color: #fff;
                margin-right: 15px;
                margin-bottom: 15px;

                img {
                    width: 120px;
                    height: 104px;
                }

                .product_listItem_text {
                    font-size: 10px;
                    color: #000000;
                    font-weight: 400;
                    line-height: 14px;
                    padding-left: 8px;
                }

                .product_listItem_price {
                    display: flex;
                    justify-content: space-between;

                    h3 {
                        color: #FF7235;
                        font-size: 14px;
                        display: inline-block;
                        width: 43px;
                        line-height: 20px;
                        padding-left: 8px;
                        margin-top: 3px;
                    }

                    .product_listItem_priceCount {
                        margin-right: 3px;

                        b {
                            margin: 0 3px;
                            font-size: 12px;
                            line-height: 14px;
                        }

                        .btnCountof {
                            width: 14px;
                            height: 14px;
                            border-radius: 9px;
                            background-color: #ececec;
                            display: inline-block;
                            line-height: 12px;
                            text-align: center;
                            cursor: pointer;
                            color: white;
                        }

                        .btnCountadd {
                            background-color: #0486fe;
                            width: 14px;
                            height: 14px;
                            border-radius: 9px;
                            display: inline-block;
                            line-height: 12px;
                            text-align: center;
                            cursor: pointer;
                            color: white;
                        }
                    }
                }

            }
        }

    }
}

.product .product_list:last-child {
    height: 800px;
}

#div-nav::-webkit-scrollbar {
    display: none;
}

* {
    ::-webkit-scrollbar {
        /*隐藏滚轮*/
        display: none;
    }
}

::v-deep .is-active {
    margin-left: 0px !important;
    padding-left: 25px !important;
    border-left: 6px solid !important;
    border-left-color: #0486fe !important;
    background-color: #f6f8ff;
}

/deep/.rounded-input .el-input__inner {
    border-radius: 20px;
    /* 设置边框半径为 20px 或其他值 */
}

/deep/.rounded-input .el-input__inner:focus {
    border-color: #a6a6a6;
    /* 可选，定义获得焦点时的边框颜色 */
}

.tac {
    height: 100%;

    .InputSearch {
        margin: 15px 0px;

        .el-input {
            border-radius: 50%;
            width: 120px;
            height: 24px;
            margin-left: 10px;
        }
    }

    .tacText {
        padding-left: 20px;
        color: #999999;
        font-size: 12px;

        span {
            display: inline-block;
            margin-left: 5px;
        }
    }

    .menuList {
        margin-top: 20px;
        height: 100%;
        width: 140px;

        li {
            line-height: 35px;
            height: 35px;
            font-size: 12;
            font-weight: 400;
            padding: 0px 20px;
            cursor: pointer;
        }

        li.active {
            background-color: #f6f8ff;
            border-left: 4px solid #0486fe;
        }
    }
}
</style>
